<template>
	<scroll-view 
		scrollX 
		scroll-with-animation 
		:show-scrollbar="false" 
		class="gl_tabs flex-center" 
		:class="{'border-bottom': isbor}" 
		:style="{background: bgcolor}">
		<view class="tabbox">
			<view class="item bgc-gray-5 border-gray-5 text-24" 
				@click="tabFun(index)" 
				:class="{actived: actived === index}" 
				v-for="item,index in list"
				:key="index"
				:style="{ color, margin }"
			>{{item.name}}</view>
		</view>
	</scroll-view>
</template>

<script setup>
import { reactive, ref, toRefs, onMounted , computed} from 'vue';
const props =  defineProps({
	list: {
		type: Array,
		default: []
	},
	height:{
		type: [String, Number],
		default:'106'
	},
	color: {
		type: String,
		default: '#9E9E9E'
	},
	activecolor: {
		type: String,
		default: '#333333'
	},
	isbor: {
		type: Boolean,
		default: false
	},
	bgcolor: {
		type: String,
		default: '#ffffff'
	},
	modelValue: {
		type: [String, Number],
		default: 0
	},
	fontSize:{
		type: Boolean,
		default: false,
	},
	padding: {
		type: String,
		default: '0 20rpx'
	},
	margin: {
		type: String,
		default: '0 25rpx 0 0'
	}
})

const imgStyle = computed(() => {
	let style = {}
	// style.height = props.height + 'rpx'
	// style.lineHeight = props.height + 'rpx'
	// style.padding = props.padding
	style.margin = props.margin
	return style;
})

const actived = ref(0)

const emit = defineEmits(['changeEvent', 'update:modelValue'])
const tabFun = (index) => {
	actived.value = index
	emit('update:modelValue', index)
	emit('changeEvent', index)
}
</script>

<style scoped lang="scss">
.gl_tabs .item{padding: 0 20rpx; height: 50rpx; line-height: 48rpx; border-radius: 6rpx; text-align: center; display: inline-flex; white-space: nowrap; align-items: center; transition: all 0.2s; justify-content: center;}
.gl_tabs .actived{border: 1px solid $primary; background-color: rgba($primary, 0.05); color: $primary !important;}

.tabbox{display: flex; align-items: center; }

// .gl_tabs.scroll .item{flex: none;}
// .gl_tabs.scroll{justify-content: flex-start;}
// .gl_tabs{}
</style>